<template>
  <div class="pass">
    <!-- 通行证管理 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>系统管理</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片 -->
    <el-card>
      <div class="sousuo">

        <div>
          <!-- 一个输入框，两个按钮 -->
          <el-button type="info" @click="refresh" class="system">刷新</el-button>
        </div>

        <div class="search">
          <!-- 一个输入框，两个按钮 -->
          <el-input v-model="searchById" placeholder="请输入用户ID" />
          <el-button type="primary" @click="getPassListByUserId">搜索</el-button>

        </div>
      </div>
      <!-- 表格 -->
      <el-table :data="passList">
        <el-table-column prop="id" label="姓名"></el-table-column>
        <!-- 快速复制某行 alt+shift+剪头 -->
        <el-table-column prop="userId" label="身份证号"></el-table-column>
        <el-table-column prop="gender" label="性别"></el-table-column>
        <el-table-column prop="age" label="年龄"></el-table-column>
        <el-table-column prop="address" label="住址"></el-table-column>
        <el-table-column prop="phone" label="手机号"></el-table-column>

        <el-table-column label="有无接触史">
          <!-- 可以通过scope.row 拿到当前这一行数据 -->
          <template v-slot="scope">
            <!-- 0 待审核 1通过 2不通过 -->
            <el-tag v-if="scope.row.status == 1" type="success">通过</el-tag>
            <el-tag v-if="scope.row.status == 0" type="warning">待审核</el-tag>
            <el-tag v-if="scope.row.status == 2" type="danger">不通过</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="remarks" label="备注"></el-table-column>

        <el-table-column label="操作" width="200px">
          <template v-slot="scope">
            <div class="operation">
              <el-button color="green" @click="getSystemEdit">编辑</el-button>
              <el-button color="red" @click="deletePass(scope.row.id)">删除</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination class="paging" background layout="prev, pager, next" :total="1000">
      </el-pagination>
    </el-card>
  </div>
</template>

  <script>
// getAllPassAPi获取所有通行证 发请求
import { ElMessage } from "element-plus";
import {
  getAllPassAPi,
  deletePassApi,
  changePassStatusApi,
  getUserPassApi,
} from "../api/index.js";
export default {
  data() {
    return {
      passList: [],
      searchById: '',
    };
  },
  methods: {
    getSystemEdit(){
      this.$router.push({
      path: "../views/systemEdit"//要跳转的页面的路由
    })
    },
    // 1.获取通行证列表的方法
    getPassList() {
      getAllPassAPi().then((res) => {
        // console.log(res)
        this.passList = res.data.data;
        // console.log(this.passList)
      });
    },
    // 2.根据id删除通行证
    deletePass(id) {
      deletePassApi(id).then((res) => {
        console.log(res);
        // 1.刷新数据
        this.getPassList();
        // 2.提示用户删除成功
        if (res.code == 20000) {
          ElMessage({
            message: "删除成功",
            type: "success",
          });
        }
      });
    },
    // 3.改变通行证状态
    changeStatus(id, status) {
      console.log(id + status);

      let obj = {
        id: id,
        status: status,
      };
      changePassStatusApi(obj).then((res) => {
        console.log(res);
        if (res.code == 20000) {
          this.getPassList();
          ElMessage({
            message: "更新成功",
            type: "success",
          });
        }
      });
    },
    // 4.搜索
    getPassListByUserId() {
      getUserPassApi(this.searchById).then(res => {
        console.log(res)
        this.passList = res.data.pass
      })
    },
    // 5.重置
    reset() {
      this.searchById = ''
      this.getPassList()
    }
  },
  created() {
    this.getPassList();

  },
  system(){
    this.$router.push({
      path: "../views/noticeAdd"//要跳转的页面的路由
    })
  }
};
</script>

  <style lang="less" scoped>
  .pass {
    .el-breadcrumb {
      margin-bottom: 30px;
    }
  }
  
  .search {
    width: 300px;
    display: flex;
  
    .el-input {
      margin-right: 30px;
    }
  }
  
  .operation {
    display: flex;
  }
  
  .paging {
    display: flex;
    justify-content: right;
  }
  
  .sousuo {
    display: flex;
    justify-content: space-between;
  }

  
  </style>
